<template>
    <div id="mountNode"></div>
</template>

<script lang="ts">
import G6 from '@antv/g6';
import { defineComponent, ref, unref, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
    setup() {
        const init = () => {
            const data = {
                // 点集
                nodes: [
                    {
                        id: 'node1', // String，该节点存在则必须，节点的唯一标识
                        x: 100, // Number，可选，节点位置的 x 值
                        y: 200, // Number，可选，节点位置的 y 值
                        type: 'rect',
                        style: {
                            width: 100,
                            height: 50,
                            radius: 10
                        }
                    },
                    {
                        id: 'node2', // String，该节点存在则必须，节点的唯一标识
                        x: 300, // Number，可选，节点位置的 x 值
                        y: 200, // Number，可选，节点位置的 y 值
                        type: 'diamond'
                    },
                    {
                        id: 'node3', // String，该节点存在则必须，节点的唯一标识
                        x: 500, // Number，可选，节点位置的 x 值
                        y: 200, // Number，可选，节点位置的 y 值
                        type: 'rect'
                    },
                    {
                        id: 'node4', // String，该节点存在则必须，节点的唯一标识
                        x: 300, // Number，可选，节点位置的 x 值
                        y: 100, // Number，可选，节点位置的 y 值
                        type: 'rect'
                    }
                ],
                // 边集
                edges: [
                    {
                        source: 'node1', // String，必须，起始点 id
                        target: 'node2' // String，必须，目标点 id
                    },
                    {
                        source: 'node1', // String，必须，起始点 id
                        target: 'node4' // String，必须，目标点 id
                    },
                    {
                        source: 'node2', // String，必须，起始点 id
                        target: 'node3' // String，必须，目标点 id
                    },
                    {
                        source: 'node2', // String，必须，起始点 id
                        target: 'node1', // String，必须，目标点 id
                        label: '否', // 边的文本
                        type: 'polyline',
                        controlPoints: [
                            { x: 300, y: 260 },
                            { x: 150, y: 260 }
                        ]

                        // style: {
                        //     endArrow: {
                        //         path: G6.Arrow.triangle(10, 10, 2),
                        //         d: 2,
                        //         fill: '#18c298ad',
                        //         stroke: '#18c298',
                        //     },
                        // },
                        // fill: '#18c298ad',
                        // stroke: '#18c298',
                    }
                ]
            };

            const graph = new G6.Graph({
                container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
                width: 800, // Number，必须，图的宽度
                height: 500, // Number，必须，图的高度

                defaultEdge: {
                    shape: 'polyline',
                    style: {
                        endArrow: true,
                        lineWidth: 2,
                        stroke: '#666'
                    }
                }
            });

            graph.data(data); // 读取 Step 2 中的数据源到图上
            graph.render(); // 渲染图
        };

        onMounted(() => {
            init();
        });
        return {};
    }
});
</script>

<style scoped>
</style>